
<template>
    <div class="box">
        <header>
            <van-icon name="arrow-left" color="bluck" class="van" @click="left_a()" />
            <p class="pp">{{ message.messageheader }}</p>
        </header>
        <main>
            <div class="boxa" ref="box">
                <div :class="item.name == '我' ? ' my' : 'name'" v-for="(item, index) in data.messageData" :key="index">
                    <div class="maina">
                        {{ item.name }}
                    </div>
                    <div class="mainb">
                        <p class="comment"> {{ item.comment }} </p>
                    </div>
                </div>
                            <div id="a"></div>

            </div>
        </main>
        <footer>
            <input type="" class="inp" v-model="data.inputValue" @keyup.enter="key"> <button class="fa" @click="sendMsg()">发送</button>
        </footer>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const box = ref()
const message = reactive({
    messagehead: [],
    messageheader: '',
})

const data: any = reactive({
    user: '',
    inputValue: '',
    messageData: [

    ]
})
const inp = () => {
    data.inputValue = ''
}

const key = (event:any) =>{
    console.log(event);
    sendMsg();
    
}

onMounted(() => {
    console.log('接收的参数', JSON.parse(route.query.data as string));
    message.messageheader = JSON.parse(route.query.data as string).house_name;
    console.log(message.messageheader);
})
const socket = new WebSocket('ws://10.31.71.52:9000')
socket.addEventListener('message', (res) => {
    console.log('收到服务器内容', + res.data);
    console.log(res.data);

    data.messageData.push({
        id: getUuid(),
        ...JSON.parse(res.data as never)
    })
})

// 点击发送消息
const sendMsg = async () => {
    box.value.scrollTop = box.value.scrollHeight
    console.log(1);
    socket.send(JSON.stringify({
        name: '我',
        comment: data.inputValue
    }))
    inp();
}

// 生成随机id
const getUuid = () => {
    var s = [];
    var hexDigits = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
    for (var i = 0; i < 16; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
    }
    let uuid = s.join("")
    return uuid
}

const left_a = () => {
    console.log(1);
    router.push('/chat')
}

</script>

<style lang="scss" scoped>
.box {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;

    header,
    footer {
        width: 100vw;
        height: 50px;
        background-color: rgb(186, 186, 186);
        opacity: 0.5;

        .pp {
            color: #000;
            line-height: 13px;
        }

        .inp {
            width: 240px;
            height: 30px;
            margin-top: 8px;
            margin-left: 15px;
            border-radius: 15px;
        }

        .fa {
            width: 100px;
            height: 35px;
            float: right;
            background: green;
            border: none;
            border-radius: 6px;
            margin-top: 9px;
            margin-right: 7px;
            color: #fff;
        }

        .van {
            line-height: 45px;
            float: left;
            margin: 0 15px;
        }
    }

    main {
        flex: 1;
        overflow: auto;

        .boxa {
            width: 100vw;
            height: 90vh;
            background: #e9e9e9;
            overflow: auto;
            .boxaa {
                .box_a {
                    width: 100%;
                    height: 50px;
                    float: left;

                    .maina {
                        float: right;
                        margin-right: 30px;
                    }

                    .mainb {
                        height: 40px;
                        border-radius: 40px;

                        .comment {
                            height: 50px;
                            float: left;
                            line-height: 30px;

                        }
                    }
                }
            }
        }
    }
}

.name {
    width: 100vw;
    background: #e9e9e9;

    .maina {
        width: 50px;
        height: 50px;
        border-radius: 50px;
        background: #d3d3d3;
        float: left;
        display: flex;
        justify-content: center;
        line-height: 50px;
    }

    .mainb {
        float: left;

        p {
            height: 40px;
            background: rgb(255, 255, 255);
            line-height: 40px;
            padding: 0 5px;
            border-radius: 5px;
            margin-left: 5px;
        }
    }
}

.my {
    width: 100vw;
    overflow: hidden;
    flex-direction: row-reverse;
    background: #e9e9e9;

    .maina {
        width: 50px;
        height: 50px;
        border-radius: 50px;
        background: #ccc;
        float: right;
        display: flex;
        justify-content: center;
        line-height: 50px;
    }

    .mainb {
        float: right;

        p {
            height: 40px;
            background: #8AC766;
            color: #161616;
            line-height: 40px;
            padding: 0 5px;
            border-radius: 5px;
            margin-right: 5px;
        }
    }
}
#a{
    height: 60px;
    width: 100vw;
    background: #e9e9e9;
}
</style>